<template>
  <div>
    <div v-for="item in systemMessageList" :key="item.key" @click="click(item.key)">
      <a href="#" class="item">
        <div class="message-content">
          <div class="title"></div>
          <div class="content" :class="{active:isActive}">
            <span class="message">{{ item }}</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isActive: true
    };
  },
  computed: {
    ...mapState("Signalr", ["systemMessageList", "Connection"])
  },
  methods: {
    ...mapMutations("Signalr", ["GetSystemMessage", "invokeNotice"]),

    click() {
      this.isActive = false;
    }
  },
  created() {
    //开始通知，判断是否加入了小组
    this.invokeNotice("SendToNoJoinGroup");
  },
  mounted() {
    this.GetSystemMessage("getMessage");
  }
};
</script>

<style>
.content {
  position: relative;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
}
.active::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}
.content:hover {
  border-radius: 5px;
  background-color: rgb(236, 236, 236);
}
.message {
  margin-left: 10px;
}
</style>